@charset "UTF-8";

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
/* 背景颜色 */
/* 边框颜色 */
/* 藏品详情页 */
.threed-container {
	width: 410rpx;
	height: 410rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	touch-action: pan-y
}

.threed-box {
	width: 239px;
	height: 239px;
	margin: 10px auto 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 5000;
	perspective: 5000;
	-webkit-transform-origin: center center;
	transform-origin: center center
}

.threed-box.moving {
	animation: collectRotate 25s infinite linear
}

.threed-box .threed-side {
	width: 368rpx;
	height: 368rpx;
	text-align: center;
	-webkit-perspective: 2000;
	perspective: 2000;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-sizing: border-box
}

.threed-box .con1 {
	position: relative;
	display: flex;
	justify-content: center;
	-webkit-transform: translateZ(9px);
	transform: translateZ(9px)
}

.threed-box .con2 {
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transform: translateZ(-9px) rotateY(180deg);
	transform: translateZ(-5px) rotateY(180deg)
}

.threed-box .cover-image,
.threed-box .bg-image {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 368rpx;
	height: 368rpx
}

.kuang-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 368rpx;
	height: 368rpx;
	z-index: 1
}

.threed-box .con3,
.threed-box .con4,
.threed-box .con5,
.threed-box .con6 {
	background-size: cover
}

.threed-box .con3 {
	height: 19px;
	background-image: url('../static/images//xuanzhuan1.png');
	-webkit-transform: translateY(-3px) rotateX(90deg);
	transform: translateY(-3px) rotateX(90deg)
}

.threed-box .con4 {
	height: 19px;
	background-image: url('../static/images//xuanzhuan1.png');
	-webkit-transform: translateY(368rpx) rotateX(-90deg);
	transform: translateY(350rpx) rotateX(-90deg)
}

.threed-box .con5 {
	width: 19px;
	background-image: url('../static/images//xuanzhuan1.png');
	-webkit-transform: translateX(-9px) rotateY(-90deg);
	transform: translateX(-9px) rotateY(-90deg)
}

.threed-box .con6 {
	width: 19px;
	border: 0 solid #000;
	background-image: url('../static/images//xuanzhuan1.png');
	-webkit-transform: translateX(368rpx) rotateY(90deg);
	transform: translateX(350rpx) rotateY(90deg)
}

.threed-box .con7,
.threed-box .con8 {
	width: 410rpx;
	height: 400rpx;
	border: 2px solid #f6c250;
	background-color: transparent;
	display: flex;
	justify-content: center;
	-webkit-transform: translate3d(-10px, -10px, 0);
	transform: translate3d(-10px, -10px, 0);
	border-radius: 20px
}

.threed-box .con8 {
	-webkit-transform: translate3d(-10px, -10px, 0) rotateY(180deg);
	transform: translate3d(-10px, -10px, 0) rotateY(180deg)
}

@keyframes collectRotate1 {
	0% {
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg)
	}

	30% {
		transform: rotateY(0deg);
	}

	100% {
		-webkit-transform: rotateY(-1turn);
		transform: rotateY(-1turn)
	}
}

@keyframes collectRotate {
	0% {
		transform: rotateY(0deg);
	}

	100% {
		transform: rotateY(-1turn)
	}
}